<template lang="html">
  <div class="">
    <div class="recommend-list" :class="{searchBarFixed:isFixed}">
        热销推荐
    </div>
    <ul >
        <router-link
        tag = "li"
        :to = "'/detail/'+item.id"
        class="item border-bottom"
        v-for="item of list"
        :key="item.id">
          <img class="item-img" :src="item.imgUrl" alt="">
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc">{{item.desc}}</p>
            <button class="item-button">查看详情</button>
          </div>
        </router-link>
    </ul>
    <div class="find-more">
      <a href="#">查看所有产品</a>
    </div>
  </div>
</template>

<script>
var offsetTop1
export default{
  name: 'HomeRecommend',
  props: {
    list: Array
  },
  data () {
    return {
      isFixed: false
    }
  },
  watch: {
    list: function () {
      this.$nextTick(() => {
        window.addEventListener('scroll', this.handleScroll)
        offsetTop1 = document.querySelector('.recommend-list').offsetTop - document.querySelector('.recommend-list').offsetHeight
      })
    }
  },
  methods: {
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > offsetTop1) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    // console.log(scrollTop);
    // console.log(offsetTop1);
    // console.log(this.isFixed);
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
@import '~styles/varibles.styl'
  .recommend-list
    line-height: .7rem
    background: #eee
    text-indent: .2rem
  .find-more
    height: .8rem
    text-align: center
    a
      line-height: .8rem
      font-size: .3rem
      font-weight: 600
  .searchBarFixed
    width: 100%;
    z-index: 999
    position: fixed;
    top: 0;
  .item
    display: flex;
    height: 1.9rem;
    overflow: hidden;
    .item-img
      width: 1.7rem;
      height: 1.7rem;
      padding: .1rem
    .item-info
      flex: 1
      padding: .1rem;
      min-width: 0
      .item-title
        line-height: .54rem
        font-size: .32rem
        ellipsis()
      .item-desc
        flex:1
        line-height: .4rem
        color:#bbb
        ellipsis()
      .item-button
        line-height: .44rem
        margin-top: .2rem
        color:#fff
        background: #ff9300
        padding: 0 .2rem;
        border-radius: .06rem
</style>
